<template>
<div class="wechat-menu-channel views-container">
    <choose-files ref="chooseFiles" :config="chooseFilesConfig" :changeEvt="uploadFileEvt"></choose-files>
    <choose-link ref="chooseLink" :config="chooseLinkConfig" :changeEvt="uploadFileEvt"></choose-link>
    <choose-categories ref="chooseCategories" :config="chooseCategoriesConfig" :changeEvt="uploadFileEvt"></choose-categories>
    <choose-ueditor-source ref="chooseUeditorSource" :changeEvt="uploadFileEvt"></choose-ueditor-source>
    <div class="wlm-form">
        <div class="wlm-form-notice warning" style="margin:0;">
            <p>由于微信接口延迟，菜单修改后最长需要30分钟更新至公众号，如未及时更新，请取消关注，再重新关注</p>
            <p>1、自定义菜单最多包括3个一级菜单，每个一级菜单最多包含5个二级菜单。</p>
            <p>2、一级菜单最多4个汉字，二级菜单最多7个汉字</p>
            <p>3、创建自定义菜单后，菜单的刷新策略是，在用户进入公众号会话页或公众号profile页时，如果发现上一次拉取菜单的请求在5分钟以前，就会拉取一下菜单，如果菜单有更新，就会刷新客户端的菜单。测试时可以尝试取消关注公众账号后再次关注，则可以看到创建后的效果。</p>
        </div>
    </div>

    <div class="wlm-form">
        <div class="wlm-form-header">菜单名称</div>
        <div class="flex-row" style="padding:10px 20px 50px;">
        <div class="wlm-form-content">
          <el-form ref="menuBase" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="140px" class="retail-form" label-position="right">
            <el-form-item label="菜单名称" prop="title">
              <el-input v-model="formFormatData.formData.title"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <div class="wlm-form">
        <div class="wlm-form-header">菜单管理</div>
        <div class="flex-row" style="padding:30px 30px 50px">
            <div class="pannel__left">
                <div class="menu-preview flex-col flex-col-reverse">
                    <div class="menu-content flex-row flex-align-c flex-justify-b">
                        <div class="menu-icon flex-row flex-align-c flex-justify-c">
                            <svg-icon style="width: 25px;height: 25px;fill: rgb(81,195,50);" icon-class="keyboard" />
                        </div>
                        <div class="menu-item-box flex-row flex-align-c flex-justify-c scale-grow">
                            <div class="menu-item" v-for="(menuitem, menuindex) in formFormatData.formData.button" :key="menuindex">
                                <p v-if="menuitem.visible" class="second-menu-box" :style="{'height':`${(menuitem.children.length + 1) * 100}%`}">
                                  <span class="second-menu" :class="{'active':(menuindex === firstIndex && childindex === submenuIndex)}" v-for="(sub_button, childindex) in menuitem.children" :key="childindex" @click="activeMenu(menuindex, childindex)"><i class="el-icon-close" @click.stop="deleteSecondary(menuindex,childindex)"></i><span class="border">{{(sub_button.name || '')}}</span></span>
                                  <span class="second-menu" @click="addMenu('second',menuindex,5)">+</span>
                                  <i class="down"></i>
                                </p>
                                <div class="first-menu" :class="{'active':menuindex === firstIndex && submenuIndex === -1}">
                                    <i v-if="formFormatData.formData.button.length > 1" class="el-icon-close" @click.stop="deletePrimary(menuindex)"></i>
                                    <!-- 'border-top':`${menuitem.children.length > 1 && (childindex !== 0)?'1':'0'}px solid #ccc`, -->
                                    <el-button @click.stop="addMenu('first', menuindex)" type="text" style="color:#999;font-size:12px;">{{menuitem.name || '+'}}</el-button>
                                </div>
                            </div>
                            <div class="menu-item" v-if="formFormatData.formData.button.length < 3">
                                <div class="first-menu">
                                    <el-button @click.stop="addMenu('first', formFormatData.formData.button.length, 'addBtn')" type="text" style="color:#999;font-size:12px;">+</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="wlm-form-content" style="padding-top:0;">
                <el-alert v-if="hasMenu" title="未设置菜单项" center :closable="false" type="warning" style="width:500px;height:150px;"></el-alert>
                <el-form v-if="!hasMenu" ref="menuSetting" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="100px" class="retail-form" label-position="right">
                    <el-alert v-if="menuindex === firstIndex" style="margin-bottom: 20px;background-color: #f3f4f7;" v-for="(menuitem, menuindex) in formFormatData.formData.button" :key="menuindex" title="" :closable="false" type="success">
                      <div class="my-badge"></div>
                        <el-form-item style="width:500px;" :label="menuindex === firstIndex && submenuIndex === -1 ? '菜单名称' : ''">
                            <template v-if="submenuIndex === -1">
                            <el-input v-model="menuitem.name" :maxlength="4" style="width:270px;"><template slot="append">{{menuitem.name.length}}/4</template></el-input>
                            <div v-if="menuitem.children.length === 0" style="padding: 30px 20px 15px;margin-left: -100px;" class="flex-col">
                                    <el-radio-group style="margin-bottom:20px;width:100%;" v-model="menuitem.type">
                                        <el-radio label="click">发送消息</el-radio>
                                        <el-radio label="view">跳转网页</el-radio>
                                        <el-radio label="miniprogram">小程序</el-radio>
                                    </el-radio-group>
                                    <el-tabs style="margin-top:-10px;" v-if="menuitem.type == 'click'" v-model="menuitem.source">
                                      <el-tab-pane label="文字" name="2">
                                        <el-input
                                          style="width:100%;"
                                          type="textarea"
                                          :autosize="{ minRows: 4, maxRows: 8}"
                                          placeholder="请输入内容"
                                          v-model="menuitem.content.text">
                                        </el-input>
                                      </el-tab-pane>
                                      <el-tab-pane label="图片" name="4"></el-tab-pane>
                                      <el-tab-pane label="音频" name="6"></el-tab-pane>
                                      <el-tab-pane label="视频" name="8"></el-tab-pane>
                                      <el-tab-pane label="关键字" name="10"></el-tab-pane>
                                      <el-tab-pane label="图文" name="12"></el-tab-pane>
                                    </el-tabs>
                                    <!-- <span>{{menuitem.content.news}}</span> -->
                                    <template v-if="menuitem.type == 'click'">
                                      <template v-if="menuitem.source == '4'">
                                        <div v-if="menuitem.content.image && !menuitem.content.image.file_path" style="margin:0 auto;width:100%;" @click="$scopeSign = 'image';chooseFilesConfig.file_type = 'image';$refs.chooseFiles.toggle()" class="wlm-upload-file">+</div>
                                        <div style="margin:0 auto;width:100%;background-size: contain;" v-if="menuitem.content.image && menuitem.content.image.file_path" class="wlm-upload-file img-center" :style="{'background-image':`url(${menuitem.content.image.file_path})`}"><i class="close-btn el-icon-circle-close  -outline" @click="menuitem.content.image = {}"></i></div>
                                      </template>
                                      <template v-if="menuitem.source == '6'">
                                        <div v-if="menuitem.content.audio && !menuitem.content.audio.file_path" style="margin:0 auto;width:100%;" @click="$scopeSign = 'audio';chooseFilesConfig.file_type = 'audio';$refs.chooseFiles.toggle()" class="wlm-upload-file">+</div>
                                        <div style="margin:0 auto;width:100%;" v-if="menuitem.content.audio && menuitem.content.audio.file_path" class="wlm-upload-file img-center">
                                          <audio
                                              v-if="menuitem.content.audio.file_type == 'audio'"
                                              class="audio pos-center"
                                              :src="menuitem.content.audio.file_path"
                                              controls="controls"
                                          />
                                          <i class="close-btn el-icon-circle-close  -outline" @click="menuitem.content.audio = {}"></i>
                                        </div>
                                      </template>
                                      <template v-if="menuitem.source == '8'">
                                        <div v-if="menuitem.content.video && !menuitem.content.video.file_path" style="margin:0 auto;width:100%;" @click="$scopeSign = 'video';chooseFilesConfig.file_type = 'video';$refs.chooseFiles.toggle()" class="wlm-upload-file">+</div>
                                        <div style="margin:0 auto;width:100%;" v-if="menuitem.content.video && menuitem.content.video.file_path" class="wlm-upload-file img-center">
                                          <video
                                              v-if="menuitem.content.video.file_type == 'video'"
                                              class="video pos-center"
                                              :src="menuitem.content.video.file_path"
                                              controls="controls"
                                          />
                                          <i class="close-btn el-icon-circle-close  -outline" @click="menuitem.content.video = {}"></i>
                                        </div>
                                      </template>
                                      <template v-if="menuitem.source == '10'">
                                        <div v-if="menuitem.content.keyword && !menuitem.content.keyword.id" style="margin:0 auto;width:100%;" @click="$scopeSign = 'keyword';$refs.chooseCategories.toggle()" class="wlm-upload-file">+</div>
                                        <div style="margin:0 auto;width:100%;" class="wlm-upload-file img-center" v-if="menuitem.content.keyword && menuitem.content.keyword.id">
                                          <span style="font-size:12px;color:#666;">{{menuitem.content.keyword.name}}:{{$keyword(menuitem.content.keyword)['keys']}}</span>
                                          <i class="close-btn el-icon-circle-close  -outline" @click="menuitem.content.keyword = {}"></i>
                                        </div>
                                      </template>
                                      <template v-if="menuitem.source == '12'">
                                        <div v-if="menuitem.content.news && !menuitem.content.news.id && !!!menuitem.content.news.imgtext_id" style="margin:0 auto;width:100%;" @click="$scopeSign = 'news';$refs.chooseUeditorSource.toggle()" class="wlm-upload-file">+</div>
                                        <div style="margin:0 auto;width:100%;" class="wlm-upload-file img-center" v-if="(menuitem.content.news && menuitem.content.news.id) || menuitem.content.news.imgtext_id">
                                          <div class="news-media flex-row flex-align-c flex-justify-c">
                                            <div class="desc">
                                              <div class="media-content">
                                                  <div class="appmsgSendedItem" v-if="!!!menuitem.content.news.imgtext_id">
                                                    <div class="title-wrp">
                                                      <span class="icon img-center" :style="{'background-image':`url(${menuitem.content.news['items'][0]['thumb_url']})`}"></span>
                                                      <span class="title">[图文消息]{{menuitem.content.news['items'][0]['title']}}<span class="color-red">（多条图文只显示一条,不影响实际回复效果）</span></span>
                                                    </div>
                                                    <p class="desc">{{menuitem.content.news['items'][0]['digest']}}</p>
                                                  </div>
                                                  <div v-else>
                                                       <span style="font-size:12px;color:#666;">{{menuitem.content.news.title}}</span>
                                                  </div>
                                              </div>
                                            </div>
                                          </div>

                                          <i class="close-btn el-icon-circle-close  -outline" @click="menuitem.content.news = {}"></i>
                                        </div>
                                      </template>
                                    </template>
                                    <el-form-item v-if="menuitem.type == 'view'" label="跳转网页">
                                      <el-input v-model="menuitem.link">
                                        <!-- <template slot="append"><span style="cursor: pointer;" @click="$scopeSign = 'link';$refs.chooseLink.toggle()">选择链接</span></template> -->
                                      </el-input>
                                    </el-form-item>
                                    <template v-if="menuitem.type == 'miniprogram'">
                                      <el-form-item label="APPID">
                                        <el-input  v-model="menuitem.appid"></el-input>
                                      </el-form-item>
                                      <el-form-item label="页面地址">
                                        <el-input v-model="menuitem.pagepath">
                                          <template slot="append"><span style="cursor: pointer;" @click="$scopeSign = 'pagepath';$refs.chooseLink.toggle()">选择链接</span></template>
                                        </el-input>
                                      </el-form-item>
                                      <el-form-item label="URL">
                                        <el-input v-model="menuitem.url">
                                          <!-- <template slot="append"><span style="cursor: pointer;" @click="$scopeSign = 'url';$refs.chooseLink.toggle()">选择链接</span></template> -->
                                        </el-input>
                                        <p class="form-help">不支持小程序的老版本客户端将打开本url</p>
                                      </el-form-item>
                                    </template>
                                </div>
                                <!-- <el-button style="margin-left:8px;" slot="reference" type="text" @click="isMenuLeval = 'first';$menuCurrent = menuitem;menuitem.visible = !visible">设置菜单动作</el-button> -->
                            </template>
                            <el-form-item v-for="(sub_button, childindex) in menuitem.children" :key="childindex"  label="菜单名称" style="margin-left:-100px;" v-if="menuindex === firstIndex && submenuIndex === childindex">
                                <el-input v-model="sub_button.name" :maxlength="7" style="width:270px;"><template slot="append">{{sub_button.name.length}}/7</template></el-input>
                                <div style="padding: 30px 20px 15px;margin-left: -100px;" class="flex-col">
                                  <el-radio-group style="margin-bottom:20px;width:100%;" v-model="sub_button.type">
                                    <el-radio label="click">发送消息</el-radio>
                                    <el-radio label="view">跳转网页</el-radio>
                                    <el-radio label="miniprogram">小程序</el-radio>
                                    </el-radio-group>
                                    <el-tabs style="margin-top:-10px;" v-if="sub_button.type == 'click'" v-model="sub_button.source">
                                      <el-tab-pane label="文字" name="2">
                                        <el-input
                                          style="width:100%;"
                                          type="textarea"
                                          :autosize="{ minRows: 4, maxRows: 8}"
                                          placeholder="请输入内容"
                                          v-model="sub_button.content.text">
                                        </el-input>
                                      </el-tab-pane>
                                      <el-tab-pane label="图片" name="4"></el-tab-pane>
                                      <el-tab-pane label="音频" name="6"></el-tab-pane>
                                      <el-tab-pane label="视频" name="8"></el-tab-pane>
                                      <el-tab-pane label="关键字" name="10"></el-tab-pane>
                                      <el-tab-pane label="图文" name="12"></el-tab-pane>
                                    </el-tabs>
                                    <template v-if="sub_button.type == 'click'">
                                      <template v-if="sub_button.source == '4'">
                                        <div v-if="sub_button.content.image && !sub_button.content.image.file_path" style="margin:0 auto;width:100%;" @click="$scopeSign = '/image';chooseFilesConfig.file_type = 'image';$refs.chooseFiles.toggle()" class="wlm-upload-file">+</div>
                                        <div style="margin:0 auto;width:100%;background-size: contain;" v-if="sub_button.content.image && sub_button.content.image.file_path" class="wlm-upload-file img-center" :style="{'background-image':`url(${sub_button.content.image.file_path})`}"><i class="close-btn el-icon-circle-close  -outline" @click="sub_button.content.image = {}"></i></div>
                                      </template>
                                      <template v-if="sub_button.source == '6'">
                                        <div v-if="sub_button.content.audio && !sub_button.content.audio.file_path" style="margin:0 auto;width:100%;" @click="$scopeSign = '/audio';chooseFilesConfig.file_type = 'audio';$refs.chooseFiles.toggle()" class="wlm-upload-file">+</div>
                                        <div style="margin:0 auto;width:100%;" v-if="sub_button.content.audio && sub_button.content.audio.file_path" class="wlm-upload-file img-center">
                                          <audio
                                              v-if="sub_button.content.audio.file_type == 'audio'"
                                              class="audio pos-center"
                                              :src="sub_button.content.audio.file_path"
                                              controls="controls"
                                          />
                                          <i class="close-btn el-icon-circle-close  -outline" @click="sub_button.content.audio = {}"></i>
                                        </div>
                                      </template>
                                      <template v-if="sub_button.source == '8'">
                                        <div v-if="sub_button.content.video && !sub_button.content.video.file_path" style="margin:0 auto;width:100%;" @click="$scopeSign = '/video';chooseFilesConfig.file_type = 'video';$refs.chooseFiles.toggle()" class="wlm-upload-file">+</div>
                                        <div style="margin:0 auto;width:100%;" v-if="sub_button.content.video && sub_button.content.video.file_path" class="wlm-upload-file img-center">
                                          <video
                                              v-if="sub_button.content.video.file_type == 'video'"
                                              class="video pos-center"
                                              :src="sub_button.content.video.file_path"
                                              controls="controls"
                                          />
                                          <i class="close-btn el-icon-circle-close  -outline" @click="sub_button.content.video = {}"></i>
                                        </div>
                                      </template>
                                      <template v-if="sub_button.source == '10'">
                                        <div v-if="sub_button.content.keyword && !sub_button.content.keyword.id" style="margin:0 auto;width:100%;" @click="$scopeSign = '/keyword';$refs.chooseCategories.toggle()" class="wlm-upload-file">+</div>
                                        <div style="margin:0 auto;width:100%;" class="wlm-upload-file img-center"  v-if="sub_button.content.keyword && sub_button.content.keyword.id">
                                          <span style="font-size:12px;color:#666;">{{sub_button.content.keyword.name}}:{{$keyword(sub_button.content.keyword)['keys']}}</span>
                                          <i class="close-btn el-icon-circle-close  -outline" @click="sub_button.content.keyword = {}"></i>
                                        </div>
                                      </template>
                                    </template>
                                    <template v-if="sub_button.source == '12'">
                                        <div v-if="sub_button.content.news && !sub_button.content.news.id" style="margin:0 auto;width:100%;" @click="$scopeSign = '/news';$refs.chooseUeditorSource.toggle()" class="wlm-upload-file">+</div>
                                        <div style="margin:0 auto;width:100%;" class="wlm-upload-file img-center" v-if="sub_button.content.news && sub_button.content.news.id">
                                          <div class="news-media flex-row flex-align-c flex-justify-c">
                                            <div class="desc">
                                              <div class="media-content">
                                                  <div class="appmsgSendedItem">
                                                    <div class="title-wrp">
                                                      <span class="icon img-center" :style="{'background-image':`url(${sub_button.content.news['items'][0]['thumb_url']})`}"></span>
                                                      <span class="title">[图文消息]{{sub_button.content.news['items'][0]['title']}}<span class="color-red">（多条图文只显示一条,不影响实际回复效果）</span></span>
                                                    </div>
                                                    <p class="desc">{{sub_button.content.news['items'][0]['digest']}}</p>
                                                  </div>
                                              </div>
                                            </div>
                                          </div>
                                          <i class="close-btn el-icon-circle-close  -outline" @click="sub_button.content.news = {}"></i>
                                        </div>
                                      </template>
                                    <el-form-item v-if="sub_button.type == 'view'" label="跳转网页">
                                      <el-input v-model="sub_button.link">
                                        <!-- <template slot="append"><span style="cursor: pointer;" @click="$scopeSign = '/link';$refs.chooseLink.toggle()">选择链接</span></template> -->
                                      </el-input>
                                    </el-form-item>
                                    <template v-if="sub_button.type == 'miniprogram'">
                                      <el-form-item label="APPID">
                                        <el-input v-model="sub_button.appid"></el-input>
                                      </el-form-item>
                                      <el-form-item label="页面地址">
                                        <el-input v-model="sub_button.pagepath"><template slot="append"><span style="cursor: pointer;" @click="$scopeSign = '/pagepath';$refs.chooseLink.toggle()">选择链接</span></template></el-input>
                                      </el-form-item>
                                      <el-form-item label="URL">
                                        <el-input v-model="sub_button.url">
                                          <!-- <template slot="append"><span style="cursor: pointer;" @click="$scopeSign = '/url';$refs.chooseLink.toggle()">选择链接</span></template> -->
                                        </el-input>
                                        <p class="form-help">不支持小程序的老版本客户端将打开本url</p>
                                      </el-form-item>
                                    </template>
                                </div>
                                <!-- <el-button style="margin-left:8px;" slot="reference" type="text" @click="isMenuLeval = 'second';$subMenuCurrent = sub_button;sub_button.visible = !visible">设置菜单动作</el-button> -->
                                <el-button slot="reference" type="text" class="color-red" @click="deleteSecondary(menuindex,childindex)">删除</el-button>
                            </el-form-item>
                            <!-- <el-button v-if="!isSecondMax(menuindex)" type="text" icon="el-icon-circle-plus-outline" @click="addMenu('second',menuindex,5)">添加二级菜单</el-button> -->
                        </el-form-item>
                    </el-alert>
                    <!-- <el-button v-if="!isFirstMax" type="text" icon="el-icon-circle-plus-outline" @click="addMenu('first')">添加一级菜单</el-button> -->
                </el-form>
            </div>
        </div>
    </div>
    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" @click="formFormatSubmit({ router: { type: 'replace', path: '/channel/weChatMenuChannelList', code: 1 }})" type="primary">保存</el-button>
    </div>
</div>
</template>

<script>
import ChooseLink from '@/components/ChooseLink/index'
import ChooseFiles from '@/components/ChooseFiles/index'
import ChooseCategories from '@/components/ChooseCategories/index'
import ChooseUeditorSource from '@/components/ChooseUeditorSource/index'
import {
  addWechatMenu,
  menuDetail
} from '@/api/channel'
import channelSource from './mixins/channelSource'
import mixins from '@/mixins/mixins'
// import tstest from '@/utils/tstest.ts'
export default {
  mixins: [mixins.getters('Form'), channelSource],
  name: 'WeChatMenuChannelAdd',
  components: {
    ChooseLink,
    ChooseFiles,
    ChooseCategories,
    ChooseUeditorSource
  },
  directives: {

  },
  computed: {
    $keyword() {
      return function($scope) {
        const result = {
          keys: [],
          content: []
        }
        const { keywords, allreply } = $scope
        this.keywordMap.map(item => {
          if (allreply && allreply[`${item}`]) {
            const { basic, images, music, news, video } = allreply
            switch (item) {
              case 'basic':
                result.content.push(`<span class="text-danger">${basic}</span>条文本`)
                break
              case 'images':
                result.content.push(`<span class="text-danger">${images}</span>条图片`)
                break
              case 'music':
                result.content.push(`<span class="text-danger">${music}</span>条音频`)
                break
              case 'news':
                result.content.push(`<span class="text-danger">${news}</span>条图文`)
                break
              case 'video':
                result.content.push(`<span class="text-danger">${video}</span>条视频`)
                break
            }
          }
        })
        if (keywords.length > 0) {
          keywords.map(item => {
            const { content } = item
            if (content) {
              result.keys.push(content)
            }
          })
        }
        result.keys = result.keys.join(';')
        result.content = result.content.join(';')
        return result
      }
    },
    isFirstMax() {
      return this.formFormatData.formData.button.length >= this.firstMax
    },
    isSecondMax() {
      return function(index) {
        return this.formFormatData.formData.button[index]['children']['length'] >= this.secondMax
      }
    },
    hasMenu() {
      return this.firstIndex === -1 && this.submenuIndex === -1
    },
    buttonLen() {
      return this.formFormatData.formData.button.length
    }
  },
  data() {
    return {
      keywordMap: ['basic', 'images', 'music', 'news', 'video'],
      $scopeSign: -1,
      isMenuLeval: -1,
      firstIndex: -1,
      submenuIndex: -1,
      chooseLinkConfig: {
        type: ['chooseLink'],
        initList: [],
        link_type: '2'
      },
      chooseFilesConfig: {
        type: ['image'],
        model: 'normal',
        initList: [],
        file_type: 'image'
      },
      chooseCategoriesConfig: {
        type: ['chooseCategories'],
        initList: [],
        choose_type: ['keyword']
      },
      firstMax: 3,
      secondMax: 5,
      formFormatData: {
        key: ['menuBase', 'menuSetting'],
        api: {
          editForm: {
            api: menuDetail,
            params: {
              id: ''
            },
            filters: {

            }
          },
          submitForm: addWechatMenu
        },
        formData: {
          title: '',
          button: [],
          name: '未命名',
          password: '',
          repassword: '',
          username: ''
        },
        rules: {
          title: [{
            required: true,
            message: '请输入菜单名称',
            trigger: 'blur'
          }]
        }
      }
    }
  },
  methods: {
    uploadFileEvt(files) {
      const { key } = files
      const scopeKeyArr = this.$scopeSign.split('/')
      const $button = this.formFormatData.formData.button
      const $menuCurrent = $button[this.firstIndex]
      const $subMenuCurrent = this.submenuIndex === -1 ? null : $button[this.firstIndex]['children'][this.submenuIndex]
      const hasSubMenu = scopeKeyArr.length > 1
      console.log(scopeKeyArr)
      console.log('$menuCurrent', $menuCurrent)
      console.log('$subMenuCurrent', $subMenuCurrent)
      if (key === 'ChooseLink') {
        const { displayData: [{ path }] } = files
        if (path) {
          if (hasSubMenu) {
            $subMenuCurrent[`${scopeKeyArr[1]}`] = path
          } else {
            $menuCurrent[`${scopeKeyArr[0]}`] = path
          }
        } else {
          this.$message.error('请选择链接~!')
        }
      } else if (key === 'ChooseFiles') {
        // $subMenuCurrent['content'] = Object.assign({ text: '', image: {}, video: {}, audio: {}, keyword: {}, news: {}}, $subMenuCurrent['content'] || {})
        // $menuCurrent['content'] = Object.assign({ text: '', image: {}, video: {}, audio: {}, keyword: {}, news: {}}, $menuCurrent['content'] || {})
        const { displayData: [file_path], type: [file_type] } = files
        if (file_path) {
          if (hasSubMenu) {
            $subMenuCurrent['content'][`${file_type}`] = file_path
          } else {
            $menuCurrent['content'][`${file_type}`] = file_path
          }
        }
        this.uploadFileChange(files)
      } else if (key === 'ChooseCategories') {
        const { displayData: [file_path] } = files
        if (file_path) {
          if (hasSubMenu) {
            $subMenuCurrent['content']['keyword'] = file_path
          } else {
            $menuCurrent['content']['keyword'] = file_path
          }
        }
      } else if (key === 'ChooseUeditorSource') {
        const { displayData: [file_path] } = files
        if (file_path) {
          if (hasSubMenu) {
            $subMenuCurrent['content']['news'] = file_path
          } else {
            $menuCurrent['content']['news'] = file_path
          }
        }
      }
    },
    deletePrimary(index) {
      this.formFormatData.formData.button.splice(index, 1)
      this.firstIndex = this.formFormatData.formData.button.length - 1
    },
    deleteSecondary(menuindex, childindex) {
      this.formFormatData.formData.button[menuindex].children.splice(childindex, 1)
      if (this.formFormatData.formData.button[menuindex].children.length === 0) {
        this.firstIndex = this.formFormatData.formData.button.length - 1
        this.submenuIndex = -1
      } else {
        this.firstIndex = menuindex
        this.submenuIndex = this.formFormatData.formData.button[menuindex].children.length - 1
      }
    },
    addMenu(level, append = 0, maxLen = 3) {
      console.log(level)
      // 添加菜单
      // let isError = false
      let $button = this.formFormatData.formData.button
      if (!Array.isArray($button)) {
        $button = []
      }
      switch (level) {
        case 'first':
          if ($button.length < 3 && maxLen === 'addBtn') {
            $button.push({
              name: '未命名',
              type: 'click',
              source: '2',
              content: {
                text: '',
                image: {},
                video: {},
                audio: {},
                keyword: {},
                news: {}
              },
              link: '',
              appid: '',
              pagepath: '',
              url: '',
              visible: false,
              children: []
            })
            // isError = true
          }
          $button[append].visible = true
          this.firstIndex = append
          this.submenuIndex = -1
          break
        case 'second':
          console.log($button[append])
          if ($button[append]['children']['length'] < 5) {
            $button[append]['children']['push']({
              name: '未命名',
              type: 'click',
              source: '2',
              content: {
                text: '',
                image: {},
                video: {},
                audio: {},
                keyword: {},
                news: {}
              },
              link: '',
              appid: '',
              pagepath: '',
              url: '',
              visible: false
            })
            // isError = true
          }
          console.log(append, $button[append]['children']['length'])
          this.firstIndex = append
          this.submenuIndex = $button[append]['children']['length'] - 1
          break
      }

      // if (!isError) {
      //   this.$message({
      //     message: (!isError ? `添加失败：上限不超过${maxLen}个` : `添加成功：上限不超过${maxLen}个`),
      //     type: !isError ? 'error' : 'success'
      //   })
      // }
    },
    activeMenu(firstIndex = -1, submenuIndex = -1) {
      console.log(firstIndex, submenuIndex)
      this.firstIndex = firstIndex
      this.submenuIndex = submenuIndex
    },
    formFormatCallBack(data, type, response) {
      if (type === 'editBeforeForm') {
        const { button = [] } = data
        console.log(button, 'editBeforeForm')
        if (!Array.isArray(button)) {
          data.button = []
        } else {
          if (Array.isArray(button) && button.length > 0) {
            this.firstIndex = 0
            button.map(item => {
              if (!Array.isArray(item.children)) {
                item.children = []
              }
            })
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$menu-icon:#eee;
$active:#fb6638;
$bg-color:#fafafa;
.wechat-menu-channel {
  /deep/ .el-alert{
    padding: 15px 16px;
    min-width:530px;
  }
  .news-media{
        height: 100%;
        .desc{
            line-height: normal;
            .appmsgSendedItem {
                position: relative;
                padding-left: 100px;
                padding-right: 5px;
                min-height: 80px;
                text-align: left;
                font-size: 14px;
                .title-wrp {
                  .title {
                      display: block;
                      font-weight: 400;
                      font-style: normal;
                      width: auto;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      word-wrap: normal;
                      .color-red{
                        color: #cf1010!important;
                      }
                  }
                  .icon{
                    position: absolute;
                    left: 10px;
                    width: 80px;
                    height: 80px;
                    vertical-align: middle;
                    display: inline-block;
                    background-color: #d7d8da!important;

                  }
                }
                &.video,&.audio{
                  padding-left: 160px;
                  .icon{
                      width: 150px;
                      video{
                        height: 100%;
                        width: 100%;
                      }
                      audio{
                        width: 100%;
                      }
                  }
                }
            }
        }
      }
  .menu-item{
    position: relative;
    flex:1;
    &:last-child{
      .first-menu{
        .el-button{
          border-right:1px solid transparent;
      }
      }
    }
    .first-menu{
      .el-button{
        border-top: 1px solid $menu-icon;
        border-right: 1px solid $menu-icon;
      }
      &:hover{
        .el-icon-close{
           display:block!important;
        }
      }
      &.active{
        .el-button{
          border: 1px solid $active!important;
        }
      }
    }
    .second-menu-box{
          position: absolute;
          width: 100%;
          bottom: 140%;
          border-left: 1px solid $menu-icon;
        border-right: 1px solid $menu-icon;
        border-bottom: 1px solid $menu-icon;
    width: 97%;
    left: 1.5%;
    .down{
      display: block;
    width: 10px;
    height: 10px;
    background-color: $bg-color;
    position: absolute;
    bottom: -6px;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    left: 50%;
    -webkit-transform: translateX(-50%) rotate(45deg);
    transform: translateX(-50%) rotate(45deg);
    content: '';
    }
    .second-menu{
      position: relative;
        height:50px;
        width: 100%;
        box-sizing:border-box;
        display:block;
        text-align: center;
        padding:0;
        cursor: pointer;
        line-height:50px;
        color: rgb(153, 153, 153);
        background-color: $bg-color;
        font-size: 12px;
        border-top: 1px solid $menu-icon;
        &:hover{
          .el-icon-close{
            display:block;
          }
        }
        .border{
          display: inline-block;
          width: 100%;
          height:100%;
        }
        &.active{
          .border{
            border: 1px solid $active;
          }
        }
    }
    }
  }
  .my-badge{
    position: absolute;
    right: 8px;
    top: 8px;
    height: 12px;
    width: 12px;
    cursor: pointer;
    color: #333;
  }

  .color-red{
    color: rgb(245, 108, 108)!important;
  }
    .menu-preview {
        position: relative;
        width: 320px;
        height: auto;
        min-height: 500px;
        margin: 0 auto;
        border: 1px solid #eee;
        border-radius: 5px;
        .menu-content {
            .menu-icon {
                width: 50px;
                height: 50px;
                border-top: 1px solid $menu-icon;
                border-right: 1px solid $menu-icon;
            }

            .menu-item-box {
                height: 50px;
                border-top: 1px solid $menu-icon;
                .el-icon-close{
                  display:none;
                  position:absolute;
                  top:5px;
                  right:5px;
                  cursor:pointer;
                  font-size:12px!important;
                }
                .el-button {
                    width: 100%;
                    display: inline-block;
                    height: 50px;
                    text-align: center;
                    border-top: none;
                    border-bottom: none;
                    border-radius: 0;
                    margin:0 0 0 -1px;
                    &:nth-child(1){
                        border-left:none;
                    }
                }
            }
        }
    }
}
</style>
